<template>
  <div>
    <div id="int">
      <p><span id="usernamems"></span> <input type="text" id="username" v-model="phone" placeholder="账号" @load="funh()"/><span></span></p>
      <p class="p2"><span id="userpassms"></span> <input type="password"  id="userpass" v-model="password" placeholder="密码"/><span></span> </p>
    </div>
   <div class="login">
  <button @click="fun()">登录</button>
   </div>
  
    <router-link to="/Zhuce">还没有账号？赶紧注册一个吧</router-link>
     <p id="msg">{{a}}</p>
  </div>
</template>

<script>
import {postlink} from 'a/postlink.js'
export default {
  data() {
    return {
      phone: "",
      password: "",
      a:""
    };
  },
  methods: {
    prev() {
      this.$router.push("/Denglu");
    },
    fun() {
      let usp = {
        "userid":this.phone,
        "password": this.password,
      };
      postlink("http://180.76.121.47:8008/login",usp).then((ok) =>{ 
        console.log(ok  );
        this.a = ok.data.msg
        console.log(ok.data.user)

        localStorage.setItem("token",ok.data.token);
        localStorage.setItem("userid",ok.data.user.userid);
        localStorage.setItem("email",ok.data.user.email);

        setTimeout(()=>{
          //这个定时器放在访问后端函数执行成功后来进行3秒后的跳转
          this.$router.push({name:'Home',params:{userid:this.phone}})
        },2000)
        
      });
 
    },


    func(){
      
      console.log("登录",this.$route.query.phone)
    }
    
  },
}
</script>

<style scoped>
a {
  margin-top: 0.2rem;
   font-size: 0.16rem;
  display: block;
  color: gray;
  text-align: center;
}
#int p{
  background-color:#f2f2f2;
  margin: auto;
  margin-top: 0.5rem;
  height: 0.45rem;
  width: 90%;
  display: flex;
  border-radius: 0.05rem;
  font-size: 0.16rem;
}
 
 input{
  background-color:#f2f2f2;
   color: #c2c2c2;
  display: block;
  height: 0.42rem;
  margin-left: 0.1rem;
  border: none;
  width: 80%;

}
#usernamems ,#userpassms{
  display: block;
  width: 10%;
  height: 0.42rem;
  text-align: right;
  background: url(../../../public/my/username.png) no-repeat;
  background-size: 0.3rem;
  background-position: 11% 40%;
  margin-left: 0.1rem;
  box-sizing: border-box;
}
#userpassms {
  background: url(../../../public/my/userpass.png) no-repeat;
  background-size: 0.3rem;
  background-position: 11% 40%;
} 
#int .p2{
    margin-top: 0.3rem;
}
button{
  display: inline-block;
  width: 90%;
  color: #fff;
  background-color: #e15141;
  height: 0.42rem;
  line-height: 0.42rem;
  font-size: 0.16rem;
  border: none;
  border-radius: 0.05rem;
}
.login{
 text-align: center;
}
 #msg{
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.16rem;
  color: red;
}
</style>
